{$layout}
{$template "/code_editor"}

{$var "header"}
<!-- clipboard -->
<script src="/js/clipboard.min.js" type="text/javascript"></script>
{$end}

<div class="ui menu text basic small blue">
	<a :href="'/proxy/board?serverId=' + server.id + '&boardType=' + boardType" class="item" v-if="boardType != 'stat'">看板</a>
	<a :href="'/proxy/stat?serverId=' + server.id" class="item" v-if="boardType == 'stat'">统计看板</a>
	<a :href="'/proxy/board/charts?serverId=' + server.id + '&boardType=' + boardType" class="item active">可用图表</a>
	<a :href="'/proxy/board/make?serverId=' + server.id + '&boardType=' + boardType" class="item">制作图表</a>
	<a :href="'/proxy/board/items?serverId=' + server.id + '&boardType=' + boardType" class="item">数据指标</a>
</div>
<div class="ui divider"></div>

<h3>图表详情 <a :href="'/proxy/board/updateChart?serverId=' + server.id + '&widgetId=' + widget.id + '&chartId=' + chart.id + '&from=' + from + '&boardType=' + boardType" v-if="canUpdate">修改</a></h3>

<table class="ui table selectable definition">
	<tr>
		<td class="title">是否启用</td>
		<td>
			<span class="ui label tiny green" v-if="chart.on">启用中</span>
			<span class="ui label tiny" v-if="!chart.on">未启用</span>
		</td>
	</tr>
	<tr>
		<td>名称</td>
		<td>
			{{chart.name}}
		</td>
	</tr>
	<tr>
		<td>说明</td>
		<td>
			<span v-if="chart.description.length > 0">{{chart.description}}</span>
			<span v-if="chart.description.length == 0" class="disabled">还没有说明</span>
		</td>
	</tr>
	<tr>
		<td>数据指标</td>
		<td>
			<span v-for="item in items" v-if="items.length > 0"> &nbsp; {{item.name}}<em style="font-style: italic;color:grey">({{item.code}})</em> &nbsp; </span>
			<span class="disabled" v-if="items.length == 0">不使用数据指标</span>
		</td>
	</tr>
	<tr>
		<td>Javascript代码</td>
		<td>
			<textarea name="javascriptCode" id="javascript-code-editor" rows="1"></textarea>
			<textarea type="text" id="javascript-code-editor2" style="position:fixed;width:1px;height:1px;right:-1024px;">{{chart.options.code}}</textarea>
			<span class="btn" title="拷贝到剪切板" data-clipboard-target="#javascript-code-editor2"><i class="ui icon copy small"></i><em>已拷贝剪切板</em></span>
		</td>
	</tr>
	<tr>
		<td>宽度</td>
		<td>{{chart.columns}}列</td>
	</tr>
</table>

<div style="height:1em"></div>
<h3>预览</h3>
<div style="margin-top:1em">
	{$template "/chart_render"}
</div>

<div style="height:2em"></div>
<div v-if="canUpdate">
	<h3>其他操作</h3>
	<button class="ui button" type="button" @click.prevent="deleteChart()">删除这个图表</button>
</div>